<template>
  <div class="category-box">
    <div class="left">
      <div class="left-category left-tag">
        <!--        <span class="category-title">PPT模板分类：</span>-->
        <ul>
          <li
            v-for="(item, index) in categoryList"
            :key="index"
            :class="[{ active: currentCategoryName === item.categoryName }]"
            @click="handleSelect(item)"
          >
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
      <!--      <div class="left-category left-tag">-->
      <!--        <span class="category-title">标签分类：</span>-->
      <!--        <ul>-->
      <!--          <li-->
      <!--            v-for="(item, index) in tagsList"-->
      <!--            :key="index"-->
      <!--            :class="[{ 'tag-active': currentTagName === item }]"-->
      <!--            @click="handleTagsSelect(item)"-->
      <!--          >-->
      <!--            {{ item.name }}-->
      <!--          </li>-->
      <!--        </ul>-->
      <!--      </div>-->
    </div>
    <div class="input-box right">
      <input
        v-model="currentQuery"
        type="text"
        placeholder=""
        class="input"
        @keyup.enter="handleQuerySelect"
      />
      <span class="span" @click="handleQuerySelect">搜</span>
    </div>
    <!-- 右侧筛选 -->
    <!--    <div class="right">-->
    <!--      <div :class="['sort-box', { active: currentSort === 'createTime' }]" @click="handleSort('createTime')">-->
    <!--        <svg-icon-->
    <!--          icon-name="icon-shijian"-->
    <!--          class-name="juejin"-->
    <!--          size="20px"-->
    <!--          :color="currentSort === 'createTime' ? '#018060' : '#ccc'"-->
    <!--        ></svg-icon>-->
    <!--        <span>时间</span>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>
<script lang="ts" setup>
  const emit = defineEmits(['getTemplateListByCate']);

  defineProps<{
    categoryList: Array<{
      categoryName: string;
      categoryId: string;
    }>;
    // tagsList: Array<{
    //   id: string;
    //   name: string;
    // } >;
  }>();

  // const currentSort = ref<string>(''); // 选中的分类
  const currentQuery = ref<string>(''); // 选中的标签

  // const currentTagId = ref<string>(''); // 选中的标签
  // const currentTagName = ref<string>(''); // 选中的标签
  // 点击分类
  const currentCategoryName = ref<string>('全部');
  const currentCategoryId = ref<string>('');
  const handleSelect = (item: any) => {
    currentCategoryId.value = item.categoryId;
    currentCategoryName.value = item.categoryName;
    let queryParams = {
      categoryId: item.categoryId,
      // sort: currentSort.value,
      // tagId: item.tagId
      currentQuery: currentQuery.value
    };
    emit('getTemplateListByCate', queryParams);
  };

  // 点击标签
  // const handleTagsSelect = (item: any) => {
  //   if (currentTagId.value === item.id) {
  //     currentTagId.value = '';
  //     currentTagName.value = '';
  //   } else {
  //     currentTagId.value = item.id;
  //     currentTagName.value = item.name;
  //   }
  //
  //   let queryParams = {
  //     categoryId: currentCategoryId.value,
  //     sort: currentSort.value,
  //     tagId: currentTagId.value
  //   };
  //   emit('getTemplateListByCate', queryParams);
  // };
  const handleQuerySelect = () => {
    let queryParams = {
      categoryId: currentCategoryId.value,
      currentQuery: currentQuery.value
    };
    emit('getTemplateListByCate', queryParams);
  };
  // const handleSort = (value: string) => {
  //   if (currentSort.value) {
  //     currentSort.value = '';
  //   } else {
  //     currentSort.value = value;
  //   }
  //
  //   let queryParams = {
  //     categoryId: currentCategoryId.value,
  //     sort: currentSort.value
  //   };
  //   emit('getTemplateListByCate', queryParams);
  // };
</script>
<style lang="scss" scoped>
  .category-box {
    width: 100%;
    display: flex;
    // min-height: 100px;
    background-color: #fff;
    justify-content: space-between;
    padding: 10px 12px 0 12px;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 13px;
      color: #333;
      .left-category {
        display: flex;
        align-items: flex-start;
        margin: 10px 0;
        .category-title {
          margin-right: 20px;
          width: 100px;
          display: flex;
          justify-content: flex-end;
        }
        ul {
          display: flex;
          flex: 1;
          li {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-right: 20px;
            transition: all 0.3s;
            border: 1px solid transparent;
            user-select: none;
            &:hover {
              color: green;
            }
          }
          .active {
            color: green;
            border-bottom: 1px solid green;
          }
        }
      }
      .left-tag {
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-right: 20px;
            transition: all 0.3s;
            border: 1px solid #31eba6;
            border-radius: 20px;
            padding: 4px 6px;
            user-select: none;
            margin-bottom: 10px;
            &:hover {
              color: green;
              border-color: green;
            }
          }
          .tag-active {
            color: green;
            border-color: green;
          }
        }
      }
    }
    .right {
      display: flex;
      align-items: flex-start;
      padding: 0 5px 0 0;
      .sort-box {
        margin-left: 10px;
        display: flex;
        align-items: center;
        color: rgb(181, 181, 181);
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
        user-select: none;
        span {
          margin-left: 2px;
          width: 30px;
        }
      }
      .active {
        color: #018060;
      }
    }
  }
  .input-box {
    position: relative;
    display: inline-block;
    bottom: 4px;
  }
  .input {
    padding: 0 40px 0 20px;
    width: 160px;
    height: 38px;
    font-size: 14px;
    border: 1px solid #eee;
    border-radius: 40px;
    background: #eee;
    transition: width 0.5s;
    transition-delay: 0.1s;
  }

  .span {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    color: #969696;
    text-align: center;
    background: #222;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
  }

  .input:focus {
    width: 230px;
    outline: none;
    box-shadow: none;
  }

  .input:focus + .span {
    background-color: pink;
    color: #fff;
  }
</style>
